<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>兔斯基 卖萌</title>
  <style type="text/css">
    @-webkit-keyframes test {
      0% {
        background-position: 0px 0;
      }

      100% {
        background-position: 0px -400%;
      }
    }

    @keyframes test {
      0% {
        background-position: 0px 0;
      }

      100% {
        background-position: 0px -400%;
      }
    }

    .steps {
      height: 35px;
      width: 32px;
      text-indent: -9999px;
      /* -webkit-animation: test 4s steps(4, end) infinite; */
      animation: test 4s steps(4, start) infinite;
      background: url(https://img-blog.csdnimg.cn/201901091428055.png);
    }
  </style>
</head>

<body>
  <div class="steps">兔斯基 卖萌</div>
  <p>说明</p>
  <p>steps()是一个timing function（animation中），允许我们将动画或者过渡分割成段，而不是从一种状态持续到另一种状态的过渡。</p>
  <p>Steps(<number_of_steps>，<direction>)</p>
  <p>steps(4,end)表示让整个动画在4个关键帧之间切换。这个兔斯基揉脸的图片中包含了4帧，所以这里设置了4。而且我们的动画时长是4s，也就是说每一帧停留1s，这就和普通的GIF动图达到了一样的效果。</p>
</body>

</html>